<template>
  <div class="wrapper">
    <!-- 头部 -->
    <header>
      <p>个人中心</p>
    </header>

    <!-- 用户信息部分 -->
    <div class="other">
      <div class="head" @click="toPerson">
        <div class="head-img">
          <img :src="user.userImg ? getImageUrl(user.userImg) : defaultAvatar" alt="User Avatar" />
        </div>
        <div class="head-dsb">
          <p class="pName">{{ user.userName }}</p>
          <br />
          <p class="pId">{{ user.userId }}</p>
        </div>
      </div>

      <!-- 添加修改个人信息按钮 -->
      <center><button class="btn-edit" @click="toPerson">修改个人信息</button></center>

      <!-- 功能菜单 -->
      <ul class="nav">
        <li>
          <img src="../assets/indent.svg">
          <p>优惠券</p>
        </li>
        <li>
          <img src="../assets/clt.jpg">
          <p>签到</p>
        </li>
        <li>
          <img src="../assets/rcm.jpg" @click="toVirtualWallet">
          <p>钱包</p>
        </li>
      </ul>

      <!-- 推荐部分 -->
      <div class="Attention">
        <p>ฅ•̀∀•́ฅ 横扫饥饿 做回自己 </p>
      </div>
      <div class="mt-1">
        <div class="ps-lt">
          <div class="lt-dsb">
            <p>猜你喜欢</p>
            <i class="arr-right"></i>
          </div>
        </div>
        <div class="ps-lt">
          <div class="lt-dsb">
            <p>附近热门</p>
            <i class="arr-right"></i>
          </div>
        </div>
        <div class="ps-lt">
          <div class="lt-dsb">
            <p>我的收藏</p>
            <i class="arr-right"></i>
          </div>
        </div>
        <div class="ps-lt">
          <div class="lt-dsb">
            <p>推荐商家</p>
            <i class="arr-right"></i>
          </div>
        </div>
      </div>

      <div class="jg"></div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
  name: 'MyPage',
  data() {
    return {
      user: {
        userImg: '', // 用户头像
        userName: '',
        userId: ''
      },
      defaultAvatar: '...' // 默认头像
    };
  },
  created() {
    // 检查登录状态
    const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
    if (!isLoggedIn) {
      this.$router.push('/login');
      return;
    }
    
    const user = JSON.parse(sessionStorage.getItem('user')); // 获取用户数据
    if (user) {
      this.user = {
        userId: user.userId,
        userName: user.userName,
        userImg: user.userImg  // 假设头像信息在 user 对象中
      };
    } else {
      this.$router.push('/login');
    }
  },
  methods: {
    getImageUrl(imgPath) {
      // 检查是否为 base64 图片
      if (imgPath.startsWith('data:image')) {
        return imgPath;  // 返回 base64 编码图片
      }
      // 如果不是 base64 则使用 require 引用本地图片
      try {
        return require(`@/assets/${imgPath}`);
      } catch (e) {
        return '';  // 如果路径有误，则返回空
      }
    },
    toPerson() {
      this.$router.push('/person'); // 跳转到个人信息修改页面
    },
    toVirtualWallet() {
      this.$router.push('/wallet'); // 跳转到钱包页面
    },
    toSettings() {
      this.$router.push('/settings'); // 跳转到设置页面
    }
  },
  components: {
    Footer
  }
};
</script>
<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  min-height: calc(100vh - 14vw); /* 动态计算内容的最小高度，减去 Footer 的高度 */
  background-color: #efeff4;
  padding-bottom: 20vw; /* 增加底部填充，避免内容被 Footer 覆盖 */
}


/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background: linear-gradient(royalblue, #4d6dec, #2a34a6);
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .other {
  width: 98%;
  margin-top: 15vw;
  margin-left: 4px;
  padding-bottom: 20vw; /* 增加底部填充，避免内容被 Footer 覆盖 */
}


.wrapper .other .head {
  position: relative;
  width: 98%;
  height: 20vw;
  padding-top: 12vw;
  background: #ffffff;
  background-size: 100% 100%;
  margin-left: 4px;
  margin-top: 14vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;
}

.wrapper .other .head-img {
  position: absolute;
  top: 0.35rem;
  left: 10vw;
  width: 1.43rem;
  height: 1.43rem;
  padding: 0.04rem;
  border-radius: 1rem;
  background-color: #fff;
}

.wrapper .other .head-img img {
  margin-top: 4.8vw;
  width: 20vw;
  height: 20vw;
}



.wrapper .other .head-dsb {
  position: absolute;
  top: 8vw;
  left: 35vw;
}

.wrapper .other .head-dsb .pName {
  font-size: 6vw;
  color: #666;
}

.wrapper .other .head-dsb .pId {
  font-size: 3.5vw;
  color: #666;
}

.wrapper .other .head-dsb .dsb-id {
  margin-top: 0.08rem;
}

/*优惠券签到钱包部分*/
.wrapper .other .nav {
  margin-top: 3vw;
  width: 98%;
  height: 25vw;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;

  position: relative;
  background-size: 100% 100%;
  margin-left: 4px;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;

  user-select: none;
  /*鼠标悬浮变成手的样式*/
  cursor: pointer;

}

.wrapper .other .nav li {
  width: 16vw;
  height: 20vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  user-select: none;
  cursor: pointer;
  border-bottom: 1px solid #e5e5e5;
}

.wrapper .other .nav li img {
  width: 10vw;
  height: 10vw;
}

.wrapper .other .nav li p {
  font-size: 4vw;
  color: #666;
}


.wrapper .Attention {
  width: 98%;
  height: 10vw;
  background-color: #ffffff;
  margin-left: 4px;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;
  margin-top: 3vw;
}

.wrapper .Attention p {
  font-size: 4vw;
  color: #666;
  text-align: center;
  padding-top: 2vw;
}

.Red {
  color: royalblue;
}

.Big {
  color: royalblue;
  font-size: 5vw;
  font-weight: bold;
}


/*修改密码系列部分*/
.wrapper .other .mt-1 {
  padding-top: 6vw;
  width: 98%;
  height: 16vw;
  margin-bottom: 5vw;

  margin-top: 30vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;

  background-size: 100% 100%;
  margin-left: 4px;
  border-radius: 5px;
  box-shadow: 0 0 20px #D5D8DC;
}

.wrapper .other .mt-1 .ps-lt {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  border-radius: 5px;

}

.wrapper .other .mt-1 .ps-lt .lt-dsb {
  position: relative;
  width: 90%;
  height: 6vw;
  line-height: 6vw;
  margin-left: 2vw;
  border-bottom: 1px solid #e5e5e5;
  border-radius: 5px;

}

.wrapper .other .mt-1 .ps-lt .lt-dsb p {
  margin-left: 2vw;
  font-size: 4vw;
  color: #838383;
}

.wrapper .other .mt-1 .ps-lt .lt-dsb .arr-right {
  display: block;
  position: absolute;
  top: 0.21rem;
  right: 0.25rem;
  width: 0.14rem;
  height: 0.24rem;
  background: url(../assets/arr-right.jpg) no-repeat;
  background-size: 0.14rem 0.24rem;
}

.wrapper .other .jg {
  margin-bottom: 0.8rem;

}

.wrapper .other .head-img {
  position: absolute;
  top: 0.35rem;
  left: 10vw;
  width: 1.43rem;
  height: 1.43rem;
  padding: 0.04rem;
  border-radius: 1rem;
  background-color: #fff;
}

.wrapper .other .head-img img {
  margin-top: 4.8vw;
  width: 20vw;
  height: 20vw;
}
/****************** 底部菜单部分 ******************/
.wrapper .footer {
  width: 100%;
  height: 14vw; /* 保持 Footer 高度 */
  border-top: solid 1px #DDD;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000; /* 确保 Footer 在最顶层 */
}

/* 修改个人信息按钮的样式 */
.btn-edit {
  width: 80%;
  height: 10vw;
  font-size: 4vw;
  color: #fff;
  background-color: royalblue;
  border: none;
  border-radius: 5px;
  margin-top: 2vw;
  padding: 2vw;
  cursor: pointer;
  text-align: center;
  display: block;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 鼠标悬浮在按钮时的样式 */
.btn-edit:hover {
  background-color: blue;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

/* 按钮点击后的样式 */
.btn-edit:active {
  background-color: darkblue;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

</style>
